import { useMemo } from "react"
import { URLSearchParamsInit, useSearchParams } from "react-router-dom"
import { cleanObject } from "utils"

/**
 * 返回页面url中，指定的参数值
 */
export const useUrlQueryParam = <K extends string>(keys: K[]) => {
  const [searchParams] = useSearchParams()
  const setSearchParams = useSetUrlSearchParam()
  return [
    useMemo(
      ()=>
        keys.reduce((prev, key) => {
          return { ...prev, [key]: searchParams.get(key) || '' }
        }, 
        {} as { [key in K]: string }),
        [searchParams]),
    // 
    (params:Partial<{[key in K]:unknown}>) =>{
      return setSearchParams(params)
    }
  ] as const
} 

export const useSetUrlSearchParam = () =>{
  const [searchParams, setSearchParam] = useSearchParams()
  return (params:{[key in string]:unknown}) =>{
    const o = cleanObject(
      {...Object.fromEntries(searchParams),
      ...params}
    ) as URLSearchParamsInit
    return setSearchParam(o)
  }
}
// export const useSetUrlSearchParam = () => {
//   const [searchParams, setSearchParam] = useSearchParams();
//   return (params: { [key in string]: unknown }) => {
//     const o = cleanObject({
//       ...Object.fromEntries(searchParams),
//       ...params,
//     }) as URLSearchParamsInit;
//     return setSearchParam(o);
//   };
// };
